<template>
  <div>
    <p>{{ person }}</p>
    <button @click="changAge">改变年龄</button>
    <button @click="changFriHobby">修改朋友的爱好</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const person = reactive({
  name: '张三',
  age: 18,
  friend: {
    name: '李四',
    hobby: ['打游戏', '看电影']
  }
})
const changAge = () => {
  person.age++
}
const changFriHobby = () => {
  person.friend.hobby.push('看小说')
}
</script>
